﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
            <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
                <c:set var="ctx" value="${pageContext.request.contextPath}" />
                <html>

                <head>
                    <link rel="stylesheet" href="${ctx}/common/common.css">
                    <title>Title</title>
                    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
                    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
                    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

                    <script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
                </head>
                <style>
                    .inspectionDetail {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        padding-left: 5px;
                        padding-right: 5px;
                        padding-top: 10px;
                        padding-bottom: 10px
                    }

                    .inspectionDetail>ul {
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: row;
                        justify-content: flex-start;
                    }

                    .inspectionDetail>ul>li {
                        padding-right: 10px;
                        border-bottom: 1px #0e9aef dashed;
                        padding-top: 10px;
                        padding-bottom: 10px
                    }

                    .inspectionInfo {
                        padding-left: 20px;
                        padding-bottom: 20px;
                        padding-right: 20px;
                        border-radius: 10px;
                        margin-left: 20px;
                        width: 90%;
                        border: 1px solid #00F7DE;
                        display: flex;
                        flex-direction: column;
                        margin-top: 50px
                    }

                    .inspectionInfo>ul {
                        border-bottom: 1px solid #0e9aef;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        padding-left: 20px;
                        padding-right: 20px;
                        padding-top: 10px;
                        padding-bottom: 10px
                    }

                    .topCard {
                        display: flex;
                        flex-direction: row;
                        width: 240px;
                        height: 50px;
                        margin-left: 50px;
                        margin-top: 20px
                    }

                    .topCard>div {
                        color: white;
                        line-height: 50px;
                        text-align: center
                    }

                    .layui-carousel>[carousel-item] {
                        height: 90%;
                        width: 80%;
                        margin-left: 10%;
                        margin-top: 20px;
                    }

                    .add_fanhui {
                        position: absolute;
                        top: 35px;
                        right: 40px;
                    }
                </style>

                <body>
                    <div>
                        <%--顶部信息--%>
                            <div class="topCard">
                                <div style="width: 30%;background-color: #1a7bb9;">加工单号</div>
                                <div style="width: 70%;background-color: #0e9aef;">
                                    <c:if test="${!empty inspectionReportList && inspectionReportList.size()>0}">
                                        ${inspectionReportList.get(0).workCode}
                                    </c:if>
                                </div>
                            </div>
                            <div class="layui-form-item add_fanhui">
                                <div class="layui-input-block">
                                    <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
                                </div>
                            </div>
                            <%--工艺流程内容--%>
                                <c:forEach items="${inspectionReportList}" var="inspectionReport">
                                    <div class="inspectionInfo">
                                        <ul>
                                            <li>入库申请单号：${inspectionReport.inCode}</li>
                                            <li>入库申请人：${inspectionReport.inName}</li>
                                            <li>入库申请日期：
                                                <fmt:formatDate value="${inspectionReport.inTime}"
                                                    pattern="yyyy-MM-dd" />
                                            </li>
                                            <li>入库申请仓库：${inspectionReport.inHouseName}</li>
                                            <li>入库申请数量：${inspectionReport.inQuantity}</li>
                                        </ul>

                                        <div class="inspectionDetail">
                                            <c:forEach items="${inspectionReport.tInspReportDetailList}" var="detail"
                                                varStatus="index">

                                                <ul>
                                                    <c:if test="${detail.is_up eq '1'}">
                                                        <img style="width: 50px;position: fixed"
                                                            src="${ctx}/common/imgs/hg.png">
                                                    </c:if>
                                                    <c:if test="${detail.is_up eq '2'}">
                                                        <img style="width: 50px;position: fixed"
                                                            src="${ctx}/common/imgs/bhg.png">
                                                    </c:if>
                                                    <li>检验单号：${inspectionReport.code}</li>
                                                    <li>检验人员：${inspectionReport.personName}</li>
                                                    <li>检验方式：${inspectionReport.insp_type eq '1'?"自检":"送检"}</li>
                                                    <li title="${inspectionReport.insp_org}">
                                                        检验机构：${inspectionReport.insp_org==null?'无':fn:substring(inspectionReport.insp_org,0,5)}..
                                                    </li>
                                                    <li>日期：
                                                        <fmt:formatDate value="${inspectionReport.create_time}"
                                                            pattern="yyyy-MM-dd" />
                                                    </li>
                                                    <li title="${detail.name}">检验项：${fn:substring(detail.name,0,3)}..
                                                    </li>
                                                    <li>样本量：${inspectionReport.sample_size}</li>
                                                    <li>结果：${detail.is_up eq '1'?'合格':'不合格'}</li>
                                                    <div class="layui-carousel imgs" id="img${detail.id}"
                                                        style="display: none;height: 90%;width: 89%;">
                                                        <div style="color: #0e9aef;float: right;cursor: pointer"
                                                            onclick="closeInspectionReport(this)">[关闭]</div>
                                                        <div carousel-item>
                                                            <c:forEach items="${inspectionReport.tInspReportAttList}"
                                                                var="att">
                                                                <img src="${ctx}${att.turl}" />
                                                            </c:forEach>
                                                        </div>
                                                    </div>
                                                    <li onclick="showInspectionReport(this)"
                                                        style="color: #0e9aef;cursor: pointer">检验报告</li>
                                                </ul>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </c:forEach>
                    </div>
                </body>
                <script>
                    var ins;
                    function showInspectionReport(obj) {
                        var imgId = $(obj).parent().children(".imgs").attr("id");
                        if (ins != null) {
                            ins.reload({
                                elem: '#' + imgId
                                , full: true
                                , arrow: 'always' //始终显示箭头
                            });
                        }
                        layui.use('carousel', function () {
                            var carousel = layui.carousel;
                            //建造实例
                            var ins = carousel.render({
                                elem: '#' + imgId
                                , full: true
                                , arrow: 'always' //始终显示箭头
                            });
                            $(obj).parent().children(".imgs").show()
                        });
                    }
                    function closeInspectionReport(obj) {
                        $(obj).parent().hide();
                    }
                    document.getElementById("rollback").addEventListener("click", function () {
                        window.history.back();
                    })
                </script>

                </html>